<script setup lang="ts">
import {Ref, ref, UnwrapRef, watch} from "vue";
import {ElMessage} from "element-plus";

const bubblesNumber:Ref<UnwrapRef<number>, UnwrapRef<number> | number>=ref(2)
const bubbleWidth:Ref<UnwrapRef<number>, UnwrapRef<number> | number>=ref(200)

function bubbleAllow(){
  if (bubbleWidth.value * bubblesNumber.value > 3000) {
    ElMessage.error('数量与尺寸之积不得超过3000');
    return false;
  }
  return true;
}

// 监听 bubblesNumber 的变化
watch(bubblesNumber, (newVal,oldValue) => {
  // 判断新值与 bubbleWidth 的积是否大于 3000
  if (!bubbleAllow) {
    // 如果大于，则取消赋值
    bubblesNumber.value = 2; // 使其不超过限制
  }
});

// 监听 bubbleWidth 的变化
watch(bubbleWidth, (newVal,oldValue) => {
  // 判断新值与 bubblesNumber 的积是否大于 3000
  if (!bubbleAllow()) {
    // 如果大于，则取消赋值
    bubbleWidth.value = 200; // 使其不超过限制
  }
});
</script>

<template>
  <div id="bubble">
    <div class="container">
      <el-form label-width="auto" style="max-width: 200px;z-index: 99">
        <el-form-item label="泡泡尺寸">
          <el-input v-model="bubbleWidth"/>
        </el-form-item>
        <el-form-item label="泡泡个数">
          <el-input v-model="bubblesNumber"/>
        </el-form-item>
      </el-form>
      <h1><router-link to="/">返回</router-link></h1>
      <div v-for="i in Math.round(bubblesNumber)" class="bubble1" :style="[
          {'animation':'color1 10s linear infinite,'+
              // 'float1 '+(4+Math.random()*10)+'s ease-in-out infinite,'+
              'float3 '+(6+Math.random()*10)+'s linear infinite,'+
              'float2 '+(3+Math.random()*100)+'s linear infinite,'+
              'color1 '+(14+Math.random()*100)+'s linear infinite'},
          {'translate':'calc(100vw + '+(20*Math.random())+'px) ' +
           'calc(100vh + '+(200*Math.random())+')'}]"
           :ref="'bubble'+i"
      >
        <div class="bubble2"></div>
        <div class="bubble3"></div>
        <div class="bubble4"></div>
      </div>
    </div>
  </div>
</template>

<style>
#bubble * {
  user-select: none;
}

#bubble {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: linear-gradient(to bottom, #0090ff, white);
  top: 0;
  left: 0;
  position: fixed;
}

.container {
  margin-top: 10px;
  margin-left: 10px;
  position: relative;
  align-items: center;
}

.bubble1 {
  z-index: -1;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px,
  rgba(0, 0, 0, 0.1) 0 0 20px inset,
  rgba(255, 25, 255, 0.7) 0 0 40px inset,
  rgba(255, 25, 255, 0.4) 0 -15px 20px inset,
  rgba(255, 25, 255, 0.5) 8px 0 10px inset,
  rgba(255, 25, 255, 0.5) -8px 0 10px inset;
  height: v-bind(bubbleWidth+'px');
  width: v-bind(bubbleWidth+'px');
  position: absolute;
  /*animation: floating 5s linear infinite;*/
}

@keyframes color1 {
  10% {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px,
    rgba(0, 0, 0, 0.1) 0 0 20px inset,
    rgba(20, 20, 266, 0.7) 0 0 40px inset,
    rgba(20, 20, 266, 0.4) 0 -15px 20px inset,
    rgba(20, 20, 266, 0.5) 8px 0 10px inset,
    rgba(20, 20, 266, 0.5) -8px 0 10px inset;
  }
  20% {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px,
    rgba(0, 0, 0, 0.1) 0 0 20px inset,
    rgba(244, 224, 26, 0.7) 0 0 40px inset,
    rgba(244, 224, 26, 0.4) 0 -15px 20px inset,
    rgba(244, 224, 26, 0.5) 8px 0 10px inset,
    rgba(244, 224, 26, 0.5) -8px 0 10px inset;
  }
  30% {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px,
    rgba(0, 0, 0, 0.1) 0 0 20px inset,
    rgba(256, 200, 200, 0.7) 0 0 40px inset,
    rgba(256, 200, 200, 0.4) 0 -15px 20px inset,
    rgba(256, 200, 200, 0.5) 8px 0 10px inset,
    rgba(256, 200, 200, 0.5) -8px 0 10px inset;
  }
  40% {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px,
    rgba(0, 0, 0, 0.1) 0 0 20px inset,
    rgba(256, 10, 200, 0.4) 0 0 40px inset,
    rgba(256, 10, 200, 0.4) 0 -15px 20px inset,
    rgba(256, 10, 200, 0.4) 8px 0 10px inset,
    rgba(256, 10, 200, 0.4) -8px 0 10px inset;
  }
  50% {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px,
    rgba(0, 0, 0, 0.1) 0 0 20px inset,
    rgba(25, 200, 200, 0.7) 0 0 40px inset,
    rgba(25, 200, 200, 0.4) 0 -15px 20px inset,
    rgba(25, 200, 200, 0.5) 8px 0 10px inset,
    rgba(25, 200, 200, 0.5) -8px 0 10px inset;
  }
  60% {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px,
    rgba(0, 0, 0, 0.1) 0 0 20px inset,
    rgba(20, 255, 20, 0.7) 0 0 40px inset,
    rgba(20, 255, 20, 0.4) 0 -15px 20px inset,
    rgba(20, 255, 20, 0.5) 8px 0 10px inset,
    rgba(20, 255, 20, 0.5) -8px 0 10px inset;
  }
  70% {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px,
    rgba(0, 0, 0, 0.1) 0 0 20px inset,
    rgba(244, 224, 26, 0.7) 0 0 40px inset,
    rgba(244, 224, 26, 0.4) 0 -15px 20px inset,
    rgba(244, 224, 26, 0.5) 8px 0 10px inset,
    rgba(244, 224, 26, 0.5) -8px 0 10px inset;
  }
  80% {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px,
    rgba(0, 0, 0, 0.1) 0 0 20px inset,
    rgba(256, 200, 200, 0.7) 0 0 40px inset,
    rgba(256, 200, 200, 0.4) 0 -15px 20px inset,
    rgba(256, 200, 200, 0.5) 8px 0 10px inset,
    rgba(256, 200, 200, 0.5) -8px 0 10px inset;
  }
  90% {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px,
    rgba(0, 0, 0, 0.1) 0 0 20px inset,
    rgba(56, 200, 200, 0.7) 0 0 40px inset,
    rgba(56, 200, 200, 0.4) 0 -15px 20px inset,
    rgba(56, 200, 200, 0.5) 8px 0 10px inset,
    rgba(56, 200, 200, 0.5) -8px 0 10px inset;
  }
}

.bubble2 {
  opacity: 0.3;
  border-radius: 50%;
  box-shadow: rgba(255, 255, 255, 0.7) 0 5px 5px inset,
  rgba(255, 255, 255, 0.4) 0 10px 9px inset;
  width: v-bind(bubbleWidth-40+'px');
  height: v-bind(bubbleWidth-65+'px');
  left: 20px;
  position: absolute;
  filter: blur(1px);
}

.bubble3 {
  z-index: -1;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.15);
  filter: blur(10px);
  height: v-bind(bubbleWidth+'px');
  width: v-bind(bubbleWidth+'px');
  position: absolute;
  top: 45px;
  left: 25px;
}

.bubble4 {
  background-color: white;
  border-radius: 50%;
  transform: rotate(-35deg) scale(v-bind(bubbleWidth/200));
  width: 35px;
  height: 10px;
  position: absolute;
  top: v-bind(bubbleWidth/5+'px');
  left: v-bind(bubbleWidth/5+'px');
  animation: size 4s linear infinite;
}

@keyframes size {
  50% {
    filter: blur(1px);
  }
}

@keyframes float1 {
  50% {
    transform: translate(calc(100vw - v-bind(bubbleWidth+'px')), calc(100vh - v-bind(bubbleWidth+'px')));
  }
}

@keyframes float2 {
  50% {
    transform: translate(0vw, calc(100vh - v-bind(bubbleWidth/0.5 +'px')));
  }
}

@keyframes float3 {
  50% {
    transform: translate(calc(100vw - v-bind(bubbleWidth+'px')), 0vh);
  }
}
</style>
